<template>
  <div class="out-wrapper">
    <el-button type="primary" class="btn-back" @click="() => router.go(-1)"
      >返回3d</el-button
    >
    <label style="display: none"><span id="ink"></span>% Ink / Pixels</label>
    <Menu :content="actionContent"></Menu>

    <div class="container">
      <div class="loading">Loading please wait...</div>

      <div class="world-map"></div>
      <canvas id="renderer" width="500" height="500"></canvas>
      <canvas id="dots" width="500" height="500"></canvas>
    </div>
  </div>
</template>
  
<script setup>
import "./lib/kdtree.js";
import "./lib/philogl.js";
import "./graph.js";
import "./mingle.js";
import "./loader.js";
import { init } from "./index.js";
import Menu from "../../components/menu.vue";
import { onMounted, reactive } from "@vue/runtime-core";
import { useRouter } from "vue-router";

onMounted(() => {
  init(actionContent);
});

const router = useRouter();

const actionContent = reactive([
  {
    title: "绑定度数", // delta
    type: "slider",
    value: 1,
    range: [0, 1],
    step: 0.01,
  },
  {
    title: "样条线曲率", // curviness
    type: "slider",
    value: 1,
    range: [0, 1],
    step: 0.01,
  },
  {
    title: "扇入扇出角", // angleStrength
    type: "slider",
    value: 3,
    range: [0, 5],
  },
  {
    title: "绑定邻节点数", // neighbors
    type: "slider",
    value: 10,
    range: [2, 40],
  },
  {
    title: "边距", // margin
    type: "slider",
    value: 0,
    range: [0, 10],
  },
  {
    title: "线的类型", // type
    type: "select",
    value: "Bezier",
    option: ["Bezier", "unity"],
  },
  {
    title: "线的透明度", // alpha
    type: "slider",
    value: 1,
    range: [0, 1],
    step: 0.1,
  },
  {
    title: "线的样式", // colorType
    type: "select",
    value: "Solid",
    option: ["Solid", "Cluster", "Edge", "Direction"],
  },
  {
    title: "数据源", // dataset
    type: "select",
    value: "philippines",
    option: ["philippines", "unity"],
  },
]);
</script>
<!-- <style src="./styles/main.css"></style> -->
<style scoped>
/* .out-wrapper {
  background-color: #1e1c1c;
} */
canvas {
  position: absolute;
  top: 20%;
  left: calc(40vw - 250px);
  max-width: 1200px;
  max-height: 600px;
}

.btn-back {
  position: absolute;
  top: 10px;
  right: 10px;
}

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotateX(-50%);
  transform: rotateY(-50%);
}
</style>